<template>
	<view class="container">
		<u-navbar title="添加收货地址" placeholder leftIconColor="#fff" bgColor="#0a0816" :autoBack="true"></u-navbar>

		<!-- form -->
		<view class="pad-32">
			<u--form labelPosition="left" :model="userInfo" ref="form1" labelWidth="160rpx"
				:labelStyle="{fontSize: '28rpx',color:'#fff'}">
				<view class="bg-theme1 pad-left-right-24 pad-top-bottom-16 radius24">
					<u-form-item label="收货人" prop="name">
						<u--input color="#fff" type="text" clearable placeholderClass="input-style" placeholder="请输入收货人"
							v-model="userInfo.name" border="none"></u--input>
					</u-form-item>
					<u-form-item label="手机号码" prop="tel">
						<u--input color="#fff" type="number" clearable placeholderClass="input-style"
							placeholder="请输入手机号" v-model="userInfo.tel" border="none"></u--input>
					</u-form-item>
					<u-form-item label="所在地址">
						<pick-regions :defaultRegion="defaultRegion" @getRegion="handleGetRegion">
							<view v-if="region.length >0 " class="color-white">{{regionName}}</view>
							<view v-else class="color-pick">{{regionName}}</view>
						</pick-regions>
					</u-form-item>
					<u-form-item label="详细地址" prop="detail">
						<u--input color="#fff" type="text" clearable placeholderClass="input-style"
							placeholder="请输入详细地址" v-model="userInfo.detail" border="none"></u--input>
					</u-form-item>
				</view>

				<view class="bg-theme1 pad-left-right-24 radius24 mar-top-32">
					<u-form-item label="设置默认收货地址" prop="is_def" labelWidth="550rpx">
						<u-switch :activeValue="1" :inactiveValue="2" v-model="userInfo.is_def" size="20"></u-switch>
					</u-form-item>
				</view>
			</u--form>
			<u-button :customStyle="{border: 0}" class="mar-top-96 font-32 button bg-theme" shape="circle"
				@click="submit">保存</u-button>
		</view>
	</view>
</template>

<script>
	// 接口地址
	import {
		userAddressAdd,
		userAddressEdit
	} from '@/config/api.js'
	export default {
		data() {
			return {
				// 提交数据
				userInfo: {
					name: '',
					tel: '',
					detail: '',
					is_def: 2,
				},
				// 省市区回显
				region: [],
				// 定位到选中
				defaultRegion: [],
				// 修改id
				addressId: ""
			}
		},
		computed: {
			regionName() {
				// 转为字符串
				if (this.region.length > 0) {
					return this.region.map(item => item.name).join('-')
				} else {
					return '请选择省市区'
				}
			}
		},
		onLoad(options) {
			if (options.id) {
				let address = uni.getStorageSync('address');

				// 省市区回显
				this.region = [{
					name: address.province
				}, {
					name: address.city
				}, {
					name: address.region
				}]

				// 定位到当前地址
				this.defaultRegion = [address.province, address.city, address.region]

				//数据回显
				this.userInfo = address;
				this.addressId = options.id;
			}
		},
		methods: {
			// 新增地址
			submit() {

				if (this.userInfo.name == '') {
					uni.$u.toast('收货人不能为空')
					return
				}

				if (this.userInfo.tel == '') {
					uni.$u.toast('手机号不能为空')
					return
				}

				if (!/^1[23456789]\d{9}$/.test(this.userInfo.tel)) {
					uni.$u.toast('手机号格式不正确')
					return
				}

				if (this.regionName == '请选择省市区') {
					uni.$u.toast('请选择省市区')
					return
				}

				let regArray = this.regionName.split('-');
				this.userInfo.province = regArray[0];
				this.userInfo.city = regArray[1];
				this.userInfo.region = regArray[2];


				if (this.userInfo.detail == '') {
					uni.$u.toast('详细地址不能为空')
					return
				}

				// 新增
				if (this.addressId == "") {
					userAddressAdd(this.userInfo).then(res => {
						uni.$u.toast(res.msg);
						setTimeout(() => {
							uni.navigateBack();
						}, 800)
					})
				} else {
					// 修改
					userAddressEdit(this.userInfo).then(res => {
						uni.$u.toast(res.msg);
						setTimeout(() => {
							uni.navigateBack();
						}, 800)
					})
				}

			},
			// 确认选择省市区
			handleGetRegion(region) {
				this.region = region;
			}
		}
	}
</script>
<style scoped lang="scss">
	.container {
		min-height: 100vh;

		::v-deep .u-navbar__content {
			// background-image: url('../../static/image/my-bg.png');
			background-size: cover;
			background-repeat: no-repeat;
			background-color: #f5f5f5;
		}

		::v-deep .u-form-item__body {
			height: 100rpx;
		}

		.button {
			box-shadow: 0 10px 15px rgba(223, 0, 7, .1);
			height: 96rpx;
			color: white;
		}

		.color-pick {
			width: 460rpx;
			height: 72rpx;
			line-height: 72rpx;
			color: rgb(192, 196, 204);
		}

		.color-block {
			width: 460rpx;
			height: 72rpx;
			line-height: 72rpx;
			color: rgb(48, 49, 51);
		}
	}
</style>